<template>
 
  <div>
    <div style="width: 100%;margin:auto;height: 70%; display: flex;">
    <div style="width: 300px;height:100%; margin-top: 10px;">
    <div style="width: 300px;height: 250px; background-color: rgb(171, 162, 162);margin: auto; " >
        <img style="width: 150px; height: 150px; border-radius: 50%;" src="@/components/C574D4638B463DA081E9128897AC29B7.png" alt="">
        <div style="position: relative; width: 150px; height: 200px;  margin-left: 150px;text-align: center;margin-top: -100px;">
            <p style="color: #000; font-size: 20px;font-weight: 400; ">{{ shu }}</p> 
               <p style=" color:#fff; font-size: 17px;" v-show="shu=='huang'"> 管理员</p>
               <p style=" color:#fff; font-size: 17px;" v-show="shu!='huang'">  用户</p>
            </div>
           <hr style="width: 280px; margin: auto; margin-top: -90px;">
           <div style="margin-left: 10px; margin-top: 10px;">
            <p style="color:#fff">当前时间：<span style="color: black;">{{ currentTime }}</span></p>

            
          <p style="color: #fff">登录地点：&emsp;&emsp;&emsp;<span style="color: black;">成都</span></p>
           </div>
    </div>
    <div style="width: 300px;height: 252px;  background-color: rgb(171, 162, 162)" >
      <div style="margin: auto;width: 100px;"><el-button type="primary" style="margin-top: 100px;"  @click="ck">退出登录</el-button></div>
      
    </div>
</div>
<div style=" width: 80%; height: 100%; margin-top: 10px;" >
   
  <sty />
    
</div>
  </div>
</div>
</template> 

<script>

import { ref, reactive, watch } from "vue";
import { computed, inject, onMounted,provide, toRaw } from "vue";
 import sty from './sty.vue'

 import * as echarts from 'echarts';
 import { useRouter } from "vue-router";
export default {
  name: '',
  components:{
   sty},
mounted(){},
  setup() {
    const currentTime = ref('')
    onMounted(() => {
      setInterval(() => {
        currentTime.value = new Date().toLocaleString()
      }, 1000)
    })
    const router = useRouter();
    const store = inject("store");
    let shu=computed(() => store.state.username);

    function ck(){
      router.push("/");
      store.commit('gaiapprrr',false)
      location.reload()
    }
    return {
      shu,
      currentTime,ck
      // your code here
    }
  },
//生命周期
created(){
},
//生命周期

//注册组件

};
</script>
<style lang='less' scoped>
@cc:rgb(23, 163, 223);
</style>
